<!--
 * @description: 
 * @Author: ts
 * @Date: 2021-04-13 12:10:32
-->
<template>
  <table
    class="mu-table"
    cellpadding="0"
    cellspacing="0"
    border="0"
    :bordered="bordered"
  >
    <colgroup>
      <col v-for="(col, index) in columns" :key="index" :width="col.width" />
    </colgroup>
    <thead>
      <tr>
        <th v-for="(item, index) in columns" :key="index" :align="item.align">
          {{ item.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td
          v-for="(col, colIndex) in columns"
          :key="colIndex"
          :align="col.align"
        >
          <slot
            :name="col.render"
            :record="item"
            :index="index"
            :text="item[col.dataIndex]"
          >
            {{ item[col.dataIndex] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "mu-table",
  methods: {},
  mounted() {},
  props: {
    // 数据
    data: {
      required: true,
      type: Array,
      default() {
        return [];
      },
    },
    // 列
    columns: {
      require: true,
      type: Array,
      default() {
        return [];
      },
    },
    // 是否有边框
    bordered: Boolean,
  },
};
</script>

<style scoped lang="scss">
@import "../variable.scss";

.mu-table {
  &[bordered] {
    border: 1px solid $border-color;
    border-bottom: none;
    border-right: none;

    th,
    td {
      border-right: 1px solid $border-color;
    }
  }

  th,
  td {
    padding: 5px 5px;
    border-bottom: 1px solid $border-color;
  }

  tbody {
    tr {
      &:hover {
        background: #efefef;
      }
    }
  }
}
</style>